<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text" value="">
    <button type="submit">获取学生信息</button>
  </form>
  <script>
    /* 
      表单提交事件的绑定方式:
        1.给按钮绑定点击事件
        2.给form元素绑定提交事件submit
        3.一般我们不用form的提交,所以需要在事件内阻止默认事件(1.e.preventDefault()  2.return false)
    */
    //获取dom节点
    let oForm = document.querySelector('form')
    let oIpt = document.querySelector('input')

    oForm.onsubmit = function () {
      //在 事件中获取到value的值,如果在事件外中取到的值一直都是und
      let userId = oIpt.value
      //获取ajax的实例 实例化XMLHttpRequest 
      let xhr = new XMLHttpRequest()
      //打开路径 三个参数：第一个参数请求方式，第二个参数是请求的地址，因为是在本地服务器上可以/user,第三个参数是否为异步
      xhr.open('GET', `/user?userId=${userId}&_=${Date.now()}`, true) //Date.now()每次不同的时间戳，清除缓存
      //发送请求
      xhr.send()
      //绑定监听事件
      xhr.onreadystatechange = function () {
        /* 
          请求状态码 readyState:
          0:初始化xhr  1:已经调用的open方法  2:已经调用了send正在发送  3:已经获取到部分数据 4:已经获取所有的数据
          响应状态码 status:
            2XX:代表响应成功
        */
        //进行判断如果请求的状态码为4 与状态码在200-299区间
        if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status <= 299)) {
          //打印获取到的数据
          console.log(xhr.responseText);
        }
      }
      //阻止form默认行为 另一种方法为e.preventDefault()
      return false
    }
  </script>
</body>

</html>